@extends('layout.app')

@section('title', 'Form Event')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}

@section('content')
    <div class="container">
        <div class="card d-flex mt-3">
            <div class="card-header m-lg-0">
                <div class="card-title">Article Iteration</div>
            </div>
            <div class="card-body">
                <article id="component">
                    <ul class="article list-items list-unstyled">
                        <image-item v-for="(article, index) in filterNumber"
                                    v-bind:article="article"
                                    v-bind:key="index"
                                    v-bind:index="index"></image-item>
                    </ul>
                </article>
            </div>
        </div>
        <div class="content">

        </div>
    </div>
    @verbatim
    <script>
        Vue.component('image-item', {
            props: ["article", "index"],
            template: "<li>" +
                "<a :href='/article/ + article.id'>"
                  + "<img  v-bind:src='article.icon' />"
                  + "<p>index:@{{index}}--key:@{{article.id}}</p>"
                  + "<p>@{{article.icon}}</p>"
                + "</a>"
                + "</li>"
        });

        var app = new Vue({
            el: "#component",
            data: {
                articles: []
            },
            beforeCreate: function() {
                var vm = this;
                $.ajax({
                    url: "/ajax/article/list",
                    type: "POST",
                    data: {
                        _token: $("#s_token").attr("content")
                    },
                    success: function(data) {
                        vm.articles = data;
                    }
                })
            },
            computed: {
                filterNumber: function() {
                    return this.articles.filter(function(article, index) {
                        return index % 2 === 0;
                    })
                }
            }
        });
    </script>
    @endverbatim
@endsection


